<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/css/jquery-cron.css}" rel="stylesheet"/>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-jmeterTestPlan-add">
			<input id="treeId" name="relModuleId" type="hidden" th:value="${projectCaseModule.moduleId}"/>
			<div class="form-group">
				<label class="col-sm-3 control-label">名称：</label>
				<div class="col-sm-8">
					<input id="name" name="name" class="form-control" type="text">
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">选择所属项目：</label>
				<div class="col-sm-8">
					<select id="projects" name="relProjectId" class="form-control m-b">
						<option value="" >请选择</option>
						<option th:each="item:${projects}" th:text="${item.projectName}" th:value="${item.projectId}" ></option>
					</select>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">模块名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" onclick="selectModuleTree()" id="treeName" readonly="true" th:value="${projectCaseModule.moduleName}"/>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">测试场景：</label>
				<div class="col-sm-8">
					<select id="scenario" name="scenario" class="form-control m-b">
						<option value="" >请选择</option>
						<option value="基准测试">基准测试</option>
						<option value="负载测试">负载测试</option>
						<option value="压力测试">压力测试</option>
						<option value="容量测试">容量测试</option>
					</select>
				</div>
			</div>


			<div class="form-group">
				<label class="col-sm-3 control-label">接口名称：</label>
				<div class="col-sm-8">
					<input id="interfaceName" name="interfaceName" class="form-control" type="text">
				</div>
			</div>



			<div class="form-group">
				<label class="col-sm-3 control-label">选择测试用例：</label>
				<div class="col-sm-8">
					<select id="caseId" name="caseId" class="form-control m-b" multiple="multiple">
						<option value="" >请选择</option>
						<option th:each="item:${cases}" th:text="${item.caseName}" th:value="${item.id}" ></option>
					</select>
				</div>
			</div>


			<label class="col-sm-3 control-label">选择计划执行方式：</label>
			<div class="radio-box">
				<input type="radio"  name="jobType" value="0" checked="true"  >
				<label style="color:#2b31dc" th:text="不设置" ></label>
			</div>
			<div class="radio-box">
				<input type="radio" name="jobType" value="1" >
				<label style="color:#2b31dc" th:text="指定时间执行"></label>
			</div>
			<div class="radio-box">
				<input type="radio"  name="jobType" value="2" >
				<label style="color:#2b31dc" th:text="cron表达式执行"></label>
			</div>



			<input id="cronExpr"  name="cronExpr" class="form-control" type="hidden" >

			<div class="form-group" id="div-con-expre" style="display: none" >
				<label class="col-sm-3 control-label">cron表达式：</label>
			</div>

			<div class="form-group" style="display: none" id="div-schedule-time">
				<label class="col-sm-3 control-label">指定时间：</label>
				<div class="col-sm-8">
				   <input id="schedule-time" name="scheduledTime" class="form-control" type="text" readonly="readonly">
				</div>
			</div>

<!--			<div class="form-group" id="div-schedule-time" style="display: none" disabled>-->
<!--				<label class="col-sm-3 control-label">指定时间：</label>-->
<!--				<div >-->
<!--					<input id="schedule-time" name="schedule-time" class="form-control" type="text">-->
<!--				</div>-->
<!--			</div>-->

			<div class="form-group">	
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<input id="remark" name="remark" class="form-control" type="text">
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/select/select2.js}"></script>
	<script th:src="@{/js/plugins/jquery-cron.js}"></script>


	<script type="text/javascript">
		var prefix = ctx + "jmeter/jmeterTestPlan"
		var modulePrefix = ctx + "testmanagmt/projectCaseModule";

		$("#form-jmeterTestPlan-add").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});


		/*模块管理-新增-选择父模块树*/
		function selectModuleTree() {
			var options = {
				title: '模块选择',
				width: "380",
				url: modulePrefix + "/selectProjectCaseModuleTree/" + $("#treeId").val(),
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}


		/*模块管理-新增-选择父模块树*/
		function selectModuleTree() {
			var options = {
				title: '模块选择',
				width: "380",
				url: modulePrefix + "/selectProjectCaseModuleTree/" + $("#treeId").val(),
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}

		function doSubmit(index, layero){
			var body = layer.getChildFrame('body', index);
			$("#treeId").val(body.find('#treeId').val());
			$("#treeName").val(body.find('#treeName').val());
			layer.close(index);
		}

		/*选择项目初始化模块树*/
		function initializeModuleTree() {
			$.validate.resetForm();
			$.validate.form();
			var projectId=$("#projectId").val();
			$.ajax({
				cache : true,
				type : "GET",
				url : modulePrefix + "/getModuleByProjectId/" + projectId,
				data : {},
				async : false,
				error : function(request) {
					$.modal.alertError("系统错误");
				},
				success : function(data) {
					$("#treeId").val(data.moduleId);
					$("#treeName").val(data.moduleName);
				}
			});
		}


		function submitHandler() {
	        if ($.validate.form()) {

				let  data = $('#form-jmeterTestPlan-add').serializeObject();
				data.relCaseIdList=$("#caseId").val();
				data.cronExpr=$("#cronExpr").val();
				$.operate.saveJson(prefix + "/add", JSON.stringify(data));
	        }
	    }

		$(function () {

			// 方法名称：获取当前选中的值；icheck-radio change事件；点击事件;
			$("input:radio[name='jobType']").on('ifChecked', function(event){
				let val = $(this).val();

				if(val==0){
					$("#div-schedule-time").hide();
					$("#div-con-expre").hide();
					return;
				}

				if(val==1){
					$("#div-schedule-time").show();
					$("#div-con-expre").hide();
					return;
				}

				if(val==2){
					$("#div-con-expre").show();
					$("#div-schedule-time").hide();
					return;
				}
			});


			$("#caseId").select2();
			$("#projectId").select2();
			$("#scenario").select2();

			layui.use('laydate', function() {
				var laydate = layui.laydate;
				var times =$('#schedule-time');
				for (var i = 0; i < times.length; i++) {
					var time = times[i];
					laydate.render({
						elem: time,
						theme: 'molv',
						type: 'datetime',
						trigger: 'click',
						'format':'yyyy-MM-dd HH:mm:ss',
						done: function(value, date) {}
					});
				}
			});


			$('#div-con-expre').cron(
					{
						onChange: function() {
							$("#cronExpr").val($(this).cron("value"));
						}
					}
			);
		});

	</script>
</body>
</html>
